<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>条件渲染</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div class="app">
  <template v-if="count === 1">
    <ul>
      <li>java</li>
      <li>python</li>
      <li>cpp</li>
    </ul>
  </template>
  <!-- abc 条件渲染不能被打断 -->
  <template v-else-if="count === 2">
    <ul>
      <li>html</li>
      <li>css</li>
      <li>js</li>
    </ul>
  </template>
  <template v-else>
    <h2>other</h2>
  </template>
  <button @click="count++">click me</button>
</div>
</body>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '.app',
    data: {
      count: 0
    }
  })
</script>
</html>